<template>
  <el-main>
    <Navbar></Navbar>
    <!--  条件栏  -->
    <el-row>
      <el-col :span="24">
        <el-input v-model="queryPageBean.queryString" placeholder="档案号/姓名/手机号" style="width: 200px;"></el-input>
        <el-button @click="findPage(queryPageBean)">查询</el-button>
      </el-col>
    </el-row>
    <!--    表格-->
    <Table :table-data="page.records" :table-head="tableHead" :operation="operation"></Table>
    <!--    分页组件-->
    <el-pagination
        align="right"
        @current-change="handleCurrentChange"
        :current-page="queryPageBean.currentPage"
        :page-size="queryPageBean.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="page.total">
    </el-pagination>
  </el-main>
</template>

<script>
import Table from "@/components/Table.vue"
import { editOrderToVisited, deleteOrder, getOrders } from "@/api"

export default {
  data() {
    return {
      tableHead: [],  // 表头
      operation: [],  // 操作
      queryPageBean: {  // 分页查询条件
        currentPage: 1, // 当前页
        pageSize: 10,   // 每页记录数
        queryString: '',// 查询条件
      },
      page: {},       // 后端分页对象
      dialogFormVisible: false, // 新增框显示
      formData: {},   // 表单数据
    }
  },
  watch: {
    // 监听查询条件变化
    'queryPageBean.queryString': {
      handler(newValue, oldValue) {
        this.queryPageBean.currentPage = 1 // 将页数设为1
      },
      immediate: true
    }
  },
  methods: {
    // 查询预约
    findPage(pageQueryBean) {
      getOrders(pageQueryBean ? pageQueryBean : this.queryPageBean).then((res) => {
        this.page = res.data.data
      })
    }
    ,
    // 当前页发生变化
    handleCurrentChange(val) {
      this.queryPageBean.currentPage = val
      this.findPage()
    }
    ,
  }
  ,
  created() {
    // 自定义操作
    this.operation = [
      {
        type: 'primary',
        name: '确认预约',
        action: (row) => {
          // 发送请求
          editOrderToVisited({
            id: row.id
          }).then((res) => {
            if (res.data.flag) {
              this.$message.success(res.data.message)
              this.findPage()
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        isDisabled: (row) => {
          return row.orderStatus === '已到诊';
        }
      }, {
        type: 'danger',
        name: '取消预约',
        action: (row, index) => {
          this.$confirm('你确定要取消预约吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteOrder({id: row.id}).then((res) => {
              if (res.data.flag) {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                })
                console.log(index)
                this.$delete(this.page.records, index)
              } else {
                this.$message.error(res.data.message)
              }
            })
            
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        isDisabled: (row) => {
          return row.orderStatus === '已取消';
        }
      }
    ]
    // 自定义表头
    this.tableHead = [
      {
        name: '预约日期',
        prop: 'orderDate'
      }, {
        name: '档案号',
        prop: 'member.fileNumber'
      }, {
        name: '姓名',
        prop: 'member.name'
      }, {
        name: '手机号码',
        prop: 'member.phoneNumber'
      }, {
        name: '预约类型',
        prop: 'orderType'
      }, {
        name: '预约状态',
        prop: 'orderStatus'
      }
    ]
    // 获取检查项
    this.findPage()
  }
  ,
  components: {
    Table,
  }
}
</script>

<style lang="less">

</style>